<template>
	<view class="WithdrawMoney">
		<view class="top">
			<text style="">USDT余额：</text>
			<text style="color:#03AD8F;">{{balance}}</text>
		</view>
		<view class="list">
			<view class="money">
				<text class="">转账数量</text>
				<view class="input_box">
					<input style="flex:1;font-size: 13px;" v-model="number" type="number" placeholder="请输入转账数量(最小数量为10)">
				</view>
			</view>
			<view class="money">
				<text class="">收款账号</text>
				<view class="input_box">
					<input style="flex:1;font-size: 13px;" v-model="account" type="text" placeholder="请输入收款方的账号">
				</view>
			</view>
			<view class="money">
				<text class="">确认收款账号</text>
				<view class="input_box">
					<input style="flex:1;font-size: 13px;" v-model="saveaccount" type="text" placeholder="请再次输入收款方的账号">
				</view>
			</view>
		</view>
		<view class="btn">
			<button type="primary" @click="showBottomPopup" data-position="bottom">确定转账</button>
		</view>
		<uni-popup :show="showPopupBottom" :type="popType" v-on:hidePopup="hidePopup">
			<view class="bottom-popup">
				<text class="title">密码验证</text>
				<view class="input">
					<m-input class="m-input" type="password" displayable v-model="password" placeholder="请输入交易密码"></m-input>
				</view>
				<button type="primary" @click="save" style="margin: 10px 0;">确定转账</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '../../components/uni-popup.vue';
	import mInput from '../../components/m-input.vue';
	export default {
		data() {
			return {
				number: '', //
				account: '',
				saveaccount: '',
				balance: '0000.0000',
				showPopupBottom: false,
				popType: 'middle',
				password: '', //交易密码

			};
		},
		components: {
			uniPopup,
			mInput
		},
		onShow() {

			this.getData()
		},
		methods: {
			//统一的关闭popup方法
			hidePopup: function() {
				this.showPopupBottom = false;
			},
			//展示底部 popup
			showBottomPopup: function() {
				if (this.number < 10) {
					uni.showToast({
						icon: 'none',
						title: '转账数量最小数量为10'
					});
					return;
				}
				if (!this.account) {
					uni.showToast({
						icon: 'none',
						title: '请输入收款方的账号'
					});
					return;
				}
				if (this.saveaccount != this.account) {
					uni.showToast({
						icon: 'none',
						title: '账号不一致'
					});
					return;
				}
				this.hidePopup();
				this.popType = 'bottom';
				this.showPopupBottom = true;
			},
			getData: function() {
				const _this = this;
				this.$request.post("/api/index/index", {})
					.then(res => {

						if (res.data.code == 1) {
							_this.balance = res.data.data.assets[0].balance
						}
					})
					.catch(error => {
						console.error('error:', error);
					});
			},
			save: function() {
				if (!this.password) {
					uni.showToast({
						title: '请输入交易密码',
						icon: "none",
					});
					return false;
				}
				//用户转账
				const data = {
					money: this.number,
					user_id: this.account,
					confirm_id: this.saveaccount,
					password: this.password
				}
				this.$request.post("/api/wallet/transfer", {
						data: data
					})
					.then(res => {
						uni.showToast({
							title: res.data.msg,
							icon: "none",
						});
						if (res.data.code == 1) {
							// 跳转到其他页面
							uni.navigateTo({
								url: '../WithdrawMoney/success?type=转账成功'
							})
						}
					})
					.catch(error => {
						console.error('error:', error);
					});
			},
		},
	}
</script>

<style lang="less">
	@import '../../common/iconfont.css';

	.WithdrawMoney {
		width: 100%;
		display: flex;
		flex-direction: column;

		.top {
			display: flex;
			height: 60px;
			border-top: 5px solid #F1F1F1;
			align-items: center;
			justify-content: flex-start;
			padding: 0 40upx;
			font-size: 16px;
			border-bottom: 10px solid #F1F1F1;
		}

		.list {
			padding: 0 40upx;
			font-size: 16px;
			flex: 1;

			.money {
				display: flex;
				flex-direction: column;
				padding: 10px 0;
				font-size: 15px;
				border-bottom: 1px solid #F1F1F1;
				color: #24435D;

				.input_box {
					display: flex;
					height: 40px;
					align-items: center;
					justify-content: space-between;

					.right {
						width: 30%;
						display: flex;
						justify-content: space-around;
					}
				}
			}
		}

		.branch {
			padding: 10upx 40upx 0 40upx;
			font-size: 12px;
			height: 20px;
			display: flex;
			align-items: center;
			color: #152836;

			.iconfont {
				color: #D14B64;
				display: flex;
				align-items: center;
				margin-right: 5px;
			}
		}

		.btn {
			height: 60px;
			width: 80%;
			margin: 0 auto 10px;
		}
	}

	.bottom-popup {
		width: 90%;
		margin: 0 auto;

		.title {
			line-height: 60px;
		}

		.input {
			border-bottom: 1px solid #F1F1F1;
			font-size: 14px;
		}
	}
</style>
